<template>
  <vxe-grid ref="table" v-bind="gridOptions" v-on="gridEvents">
    <template #option="{ row }">
      <template class="table-option">
        <vxe-button status="primary" content="详情"
                    @click="queryDictDetailsEvent(row)"/>
        <Tooltip content="系统生成数据不允许编辑" :disabled="row.source != DataSourceType.SystemGeneration">
          <vxe-button :disabled="row.source === DataSourceType.SystemGeneration" status="primary" content="编辑"
                      @click="editRowEvent(row)"/>
        </Tooltip>
        <Tooltip content="系统生成数据不允许删除" :disabled="row.source != DataSourceType.SystemGeneration">
          <vxe-button :disabled="row.source === DataSourceType.SystemGeneration" status="danger" content="删除"
                      @click="deleteRowEvent(row)"/>
        </Tooltip>
      </template>
    </template>
  </vxe-grid>
  <DictEdit ref="edit" @ok="saveSuccess"/>
</template>

<script setup>
import {DataSourceType} from "@/model/common/SysEnums";
</script>
<script>
import {getPageDict, deleteDictByCode} from "@/api/sys/dict";
import {getDictMap, cleanDictCache} from "@/util";
import DictEdit from "./SysDictEdit.vue";
import {RESPONSE_CODE_SUCCESS} from "@/constant/response";
import {Message} from "view-ui-plus";

export default {
  name: "SysDictMgr",
  components: {DictEdit},
  data() {
    return {
      sysDictValueTypeDict: undefined,
      dataSourceTypeDict: undefined,
      gridOptions: {
        toolbarConfig: {
          buttons: [
            {code: 'add', name: '新增'}
          ],
          tools: [
            {code: 'doc', circle: true, round: true, transfer: true, icon: 'vxe-icon-question'}
          ],
        },
        pagerConfig: {
          pageSize: 10
        },
        columns: [
          {type: 'seq', width: 60, title: '序号'},
          {field: 'code', title: '字典编码'},
          {field: 'name', title: '字典名称'},
          {field: 'source', title: '数据来源', formatter: this.formatterDataSourceTypeDict},
          {field: 'valueType', title: '值类型', formatter: this.formatterValueType},
          {field: 'module', title: '所属模块'},
          {field: 'remark', title: '备注'},
          {title: '操作', width: 210, slots: {default: 'option'}}
        ],
        formConfig: {
          items: [
            {field: 'likeName', title: '名称：', span: 6, itemRender: {name: 'input'}},
            {field: 'likeCode', title: '编码：', span: 6, itemRender: {name: 'input'}},
            {itemRender: {name: '$button', props: {content: '查询', type: 'submit', status: 'primary'}}},
            {itemRender: {name: '$button', props: {content: '重置', type: 'reset'}}}
          ]
        },
        proxyConfig: {
          ajax: {
            query: ({page, form}) => {
              return getPageDict({
                pageIndex: page.currentPage,
                pageSize: page.pageSize,
                ...form
              })
            }
          }
        }
      },
      gridEvents: {
        toolbarButtonClick: this.toolbarButtonClick,
        toolbarToolClick: this.toolbarToolClick
      },
    }
  },
  created() {
    this.reloadTableData()
  },
  methods: {
    reloadTableData() {
      getDictMap("SysDictValueType", "DataSourceType").then(res => {
        this.sysDictValueTypeDict = res.get("SysDictValueType")
        this.dataSourceTypeDict = res.get("DataSourceType")
        this.$refs.table.commitProxy('reload')
      })
    },
    formatterValueType({cellValue}) {
      if (this.sysDictValueTypeDict) {
        return this.sysDictValueTypeDict.dataMap.get(cellValue).name
      }
      return cellValue
    },
    formatterDataSourceTypeDict({cellValue}) {
      if (this.dataSourceTypeDict) {
        return this.dataSourceTypeDict.dataMap.get(cellValue).name
      }
      return cellValue
    },
    toolbarToolClick({code}) {
      switch (code) {
        case 'doc': {
          const {href} = this.$router.resolve({
            path: '/markdown/preview',
            query: {
              filePath: this.$webBaseUrl + '/doc/dict/dict.md'
            }
          })
          window.open(href, '_blank');
          return;
        }
        default: {
          return
        }
      }
    },
    toolbarButtonClick({code}) {
      switch (code) {
        case 'add': {
          this.$refs.edit.show({
            title: "添加字典"
          })
          return;
        }
        default: {
          return
        }
      }
    },
    deleteRowEvent(row) {
      this.$Modal.confirm({
        title: '删除字典',
        content: '确认删除字典?<br/> 名称:' + row.name + '<br/>编码:' + row.code,
        okText: '删除',
        onOk: () => {
          deleteDictByCode({
            dictCode: row.code
          }).then(res => {
            if (res.code == RESPONSE_CODE_SUCCESS) {
              cleanDictCache();
              this.reloadTableData()
              Message.success("删除成功")
            }
          })
        }
      })
    },
    queryDictDetailsEvent(row) {
      this.$router.push({
        path: "/system/dict/details",
        query: {
          dictCode: row.code
        }
      })
    },
    editRowEvent(row) {
      this.$refs.edit.show({
        title: "修改字典",
        data: this.$utils.clone(row)
      })
    },
    saveSuccess() {
      cleanDictCache();
      this.reloadTableData()
    }
  }
}
</script>

<style scoped>

</style>
